<template>
  <div id='index'>
    <com-head>首页-足彩</com-head>
    
      <swiper  ref="mySwiper">
        <swiperSlide v-for="(item,index) in swiperImg" :key="index">
          <a href="">
            <img class="swiper-slid_img" :src="item" alt=""/>
          </a>
        </swiperSlide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
   

    <div class="nav">

      <div class="wai1">
        <router-link tag="span" :to="{name: 'gamelist', query: {status: 1}}">
          <div class="wai zu">
            <div class="box">
            <img src="../assets/images/navimg2.png" alt="">
          </div>
            <span>足球</span>
          </div>
        </router-link>
      </div>
      <div class="wai1">
        <router-link tag="div" :to="{name: 'expert'}">
          <div class="wai zhuan">
            <div class="box">
              <img src="../assets/images/navimg5.png" alt="">
            </div>
            <span>专家</span>
          </div>
        </router-link>
      </div>
      <div class="wai1">
        <router-link tag="div" :to="{name: 'gamelist', query: {status: 2}}">
          <div class="wai lan">
            <div class="box">
              <img src="../assets/images/navimg1.png" alt="">
            </div>
            <span>篮球</span>
          </div>
        </router-link>
      </div>
      <div class="wai1">
        <router-link tag="div" :to="{name: 'gamelist', query: {status: 3}}">
          <div class="wai mian">
            <div class="box">
              <img src="../assets/images/navimg3.png" alt="">
            </div>
            <span>精品推荐</span>
          </div>
        </router-link>
      </div>
      <div class="wai1">
        <router-link tag="div" :to="{name: 'payment'}">
          <div class="wai bang">
            <div class="box">
              <img src="../assets/images/navimg4.png" alt="">
            </div>
            <span>精品二串一</span>
          </div>
        </router-link>
      </div>
    </div>
    <div class="message" @click="gongGao()">
      <i class="iconfont icon-xiaolaba"></i>
      <span>&nbsp; {{gonggao}}<span class="red"></span></span>
    </div>
    <!-- <div class="imgvs"><img src="../assets/images/scope.png" alt=""></div> -->
    <div class="fatherbox">
      <div class="title">
        <span class="left">精品推荐</span>
        <router-link :to="{name: 'gamelist', query: {status: 3}}" tag="span"><span class="right">更多></span></router-link> 
      </div>
    </div>
  <div class="content">
    <!-- <div class="news" v-for="(item, index) in data" @click="getnewsdetail(item.id)" :key="index">
      <div class="imgl">
        <img :src="item.img" alt="">
      </div>
      <div class="textr">
        <p>{{item.title}}</p>
        <p>{{item.content}}</p>
        <p>{{item.add_time}}</p>
      </div>
    </div> -->
  
  <div class="gamelist" v-for="(item,index) in message" @click="getnewsdetail(item.id,item.user_id,item.info_price)" :key="index">
        <div class="gametop">
            <div class="left">
                <div class="box1"><img :src="item.expert_img"></div>
                <div class="box2">{{item.user_name}}</div>
                <div class="box3">{{item.position}}</div>
            </div>
            <!-- <div class="right">{{item.money}}</div> -->
            <div class="right">{{item.info_price}}</div>
        </div>
        <div class="gamecenter">{{item.name}}&emsp;{{item.begin_time}}</div>
        
        <div class="gamecon">
            <div class="box1">{{item.main_team}}<span>&nbsp;(主)</span> </div>
            <div class="box2">vs</div>
            <div class="box3">{{item.team}}</div>
        </div>
        <div class="gamecenter title">标题：{{item.title}}</div>
    </div>
  <com-foot :select="0"></com-foot>
  </div>
  </div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "index",
  data() {
    return {
      gonggao: "",
      gonggaoid: "",
      swiperOption: {
        direction: "horizontal",
        pagination: {
          el: ".swiper-pagination"
        },
        autoplay: {
          delay: 500,
          stopOnLastSlide: true
        },
        notNextTick: true,
        autoplay: true,
        loop: true,
        autoplayDisableOnInteraction: false
      },
      swiperImg: [],
      message: []
    };
  },
  components: {
    swiper,
    swiperSlide
  },
  // 创建之后
  created: function() {
    this.getnews(); //获取新闻信息
    this.loadmes3(); // 请求精品推荐
  },
  methods: {
    getnews() {
      this.axios
        .post("Index/index")
        .then(response => {
          console.log(response);
          if (response.status == "200") {
            // this.message = response.data.news;
            this.swiperImg = response.data.img;
            this.gonggao = response.data.gonggao.title;
            this.gonggaoid = response.data.gonggao.id;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    gongGao() {
      this.$router.push({ name: "detail", query: { id: this.gonggaoid } });
    },
    // 首页专家列表
    loadmes3() {
      this.axios
        .post("News/index")
        .then(({ data }) => {
          console.log(data);
          this.message = data.news;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    getnewsdetail(id, uid, money) {
      // this.$router.push({ name: "expertrecommend", query: { id: id ,status: 0} });
      if (money == "已购买"||money == "0") {
        this.$router.push({
          name: "expertrecommend",
          query: { id: id, expertid: uid, status: 0 }
        });
      } else {
        console.log(id);
        console.log(money);
        this.$bus.$emit("comAlert", {
          title: "支付确认",
          info: "你需要支付" + money + "元",
          button: [
            {
              text: "确认",
              callback: () => {
                this.axios
                  .post("Index/zhifu", {
                    money: money,
                    id: id
                  })
                  .then(({ data }) => {
                    console.log(data);
                    if (data.status === 1) {
                      this.$bus.$emit("toast", "购买成功");
                      this.$router.push({
                        name: "expertrecommend",
                        query: { id: id, expertid: uid, status: 0 }
                      });
                    } else if (data.status === 2) {
                      this.$bus.$emit("toast", "积分不足，请充值");
                      this.$router.push("userCenter");
                    }
                  });
                // .catch(function (error) {
                //   console.log(error);
                // });
              }
            },
            {
              text: "取消",
              callback: () => {}
            }
          ]
        });
      }
    }
  }
};
</script>
<style lang='scss'>
@import "../assets/scss/reset.scss";
@import url(../assets/scss/swiper-4.3.3.min.css);
#index {
  padding-top: 67px;
  background: white;
  .icon-ziyuan {
    display: none;
  }
  .swiper-container {
    width: 100%;
    height: 360px;
    // background: yellow;
    img {
      width: 100%;
      height: 100%;
    }
    // .swiper-pagination-bullets {
    //   // bottom: 85px;
    // }
    .swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      background: #b0aeaf;
      border-radius: 6px;
    }
    .swiper-pagination-bullet-active {
      width: 12px;
      height: 12px;
      background: #ff762c;
      border-radius: 6px;
    }
  }
  .nav {
    width: 100%;
    height: 260px;
    background: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .wai1 {
      text-align: center;
      .lan > .box {
        background: rgba(255, 122, 36, 1);
      }
      .zu > .box {
        background: rgba(58, 163, 82, 1);
      }
      .mian > .box {
        background: rgba(220, 182, 1, 1);
      }
      .bang > .box {
        background: rgba(122, 184, 255, 1);
      }
      .zhuan > .box {
        background: #da0cdc;
      }
      span {
        font-size: 18px;
      }
      .box {
        width: 106px;
        height: 105px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 50px;
        }
      }
    }
  }
  .message {
    height: 55px;
    font-size: 18px;
    padding-left: 40px;
    color: rgba(69, 69, 69, 1);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: rgba(245, 245, 245, 1);
    .icon-xiaolaba {
      color: #fd8f06;
      font-size: 40px;
    }
    span {
      font-size: 24px;
      color: rgba(77, 77, 77, 1);
      .red {
        color: #ff7a24;
      }
    }
  }
  .imgvs {
    width: 100%;
    padding: 30px 30px 0;
    box-sizing: border-box;
    background-color: white;
    img {
      width: 100%;
    }
  }
  .fatherbox {
    padding: 0 40px;
    border: 1px solid #f4f4f4;
  }
  .title {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left,
    .right {
      line-height: 70px;
    }
    .left {
      font-size: 26px;
      color: rgba(68, 68, 68, 1);
      padding-left: 22px;
      position: relative;
      display: inline-block;
      font-weight: 700;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        top: 50%;
        height: 32px;
        transform: translateY(-50%);
        background: rgba(255, 122, 36, 1);
      }
    }
    .right {
      font-size: 26px;
      color: rgba(153, 153, 153, 1);
    }
  }
  .content {
    background-color: #f4f4f4;
    .gamelist {
      height: 100%;
      width: 100%;
      background-color: #fff;
      padding: 0 50px 0 30px;
      box-sizing: border-box;
      margin-bottom: 20px;
      .gametop {
        padding: 24px 0 24px 36px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          font-size: 26px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          img {
            width: 100%;
          }
          .box1 {
            width: 80px;
            height: 80px;
            border-radius: 40px;
            overflow: hidden;
          }
          .box2 {
            margin-left: 15px;
          }
          .box3 {
            margin-left: 15px;
            background-color: #fd9e58;
            color: #fff;
            padding: 0 5px;
            height: 36px;
            border-radius: 8px;
            font-size: 22px;
            text-align: center;
            line-height: 40px;
          }
        }
        .right {
          margin-left: 15px;
          font-size: 22px;
          text-align: center;
          line-height: 36px;
          border-radius: 8px;
          border: 2px solid #f25b5b;
          padding: 5px 15px;
          color: #f25b5b;
        }
      }
      .gamecenter {
        color: rgb(88, 88, 88);
        font-size: 24px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        // -webkit-box-orient: vertical;
        overflow: hidden;
      }
      .title {
        line-height: 60px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        // -webkit-box-orient: vertical;
        overflow: hidden;
        // text-align: left;
      }
      .gamecon {
        font-size: 28px;
        font-weight: 700;
        color: rgb(82, 81, 81);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .box2 {
          font-size: 30px;
        }
        .box1 span {
          color: #f25b5b;
        }
      }
    }
  }
}
</style>
